<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="书籍名称">
        <el-input v-model="queryForm.bookName" placeholder="请输入书籍名称" clearable />
      </el-form-item>

      <el-form-item label="版本">
        <el-select v-model="queryForm.categoryId" placeholder="请选择" clearable >
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadBookList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveFood(null)">添加书籍</el-button>
    </div>
    <el-table :data="bookList" stripe>
      <el-table-column prop="bookName" label="名称" />
      <el-table-column prop="categoryName" label="分类名称" />

      <el-table-column label="图片">
        <template #default="scope">
          <el-image style="height: 23px; border: none; cursor: pointer;vertical-align: top"
              :src="scope.row.photo"
          />
        </template>
      </el-table-column>
      
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveFood(scope.row.id)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup>  
import { reactive, ref } from "vue";  
import { useRouter } from "vue-router";  
import { getBookList , deleteFoodById} from "@/api/book";  
import { getCategoryList } from "@/api/category";  
import { ElMessage, ElMessageBox } from 'element-plus';  
  
const router = useRouter();  
  
const queryForm = reactive({  
  bookName: null,  
  categoryId: null,  
  page: 1,  
  pageSize: 10  
});  
  
let bookList = reactive([]);  
let categoryList = reactive([]);  
  
let total = ref(0);  
  
// 加载全部菜品分类  
getCategoryList().then(resp => {  
  categoryList.push(...resp.data);  
});  
  
let handleSaveFood = (bookId) => {  
  if (bookId) {  
    // 编辑  
    router.push({ path: '/book/save', query: { bookId: bookId } });  
  } else {  
    // 添加  
    router.push({ path: '/book/save' });  
  }  
}  
 
let handleDelete = (bookId) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否删除?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    // 发送请求  
    deleteFoodById(bookId).then(resp => {  
      if (resp.code == 200) {  
        loadBookList();  
      } else {  
        ElMessage.error(resp.msg);  
      }  
     
    });  
  }).catch(() => {  
  });  
}  

  
// 定义方法  
let loadBookList = () => {  
  // 准备数据  
  getBookList(queryForm).then(resp => {  
    // 检查响应状态  
    if (resp.success || (resp.msg && resp.msg === '成功')) { // 假设成功时可能有 success 字段或 msg 为 '成功'  
      bookList.length = 0; // 清空当前列表  
      bookList.push(...resp.data); // 添加新数据  
      total.value = resp.total; // 更新总数  
    } else {  
      // 处理非成功状态  
      ElMessage.error(resp.msg || '加载书籍列表失败'); // 显示错误信息，如果msg不存在则显示默认信息  
      bookList.length = 0; // 清空列表  
      total.value = 0; // 重置总数  
    }  
  }).catch(error => {  
    // 处理请求错误  
    ElMessage.error('加载书籍列表失败');  
    console.error('加载书籍列表出错:', error);  
    bookList.length = 0; // 清空列表  
    total.value = 0; // 重置总数  
  });  
};
  
let handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadBookList();  
}  
  
let handlePageChange = (page) => {  
  queryForm.page = page;  
  loadBookList();  
}  
  
loadBookList();  
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
